<template>
  <div class="container page">
    <form class="col-sm-8">
      <legend>PV UV查询 <a class="add_site_id" href="javascript:void(0)" data-toggle="modal" data-target="#addSiteIdModal" >新增站点id</a></legend>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label" >开始时间：</label>
        <div class="col-sm-4">
          <input class="form-control datetimepicker" type="text" id="start" :value="start" >
        </div>
        <label class="col-sm-2 col-form-label" >结束时间：</label>
        <div class="col-sm-4">
          <input class="form-control datetimepicker" type="text" id="end" :value="end">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"  >站点id：</label>
        <div class="col-sm-4">
          <select class="form-control" v-model="site_id" >
            <option v-for="i in siteList" :value="i.v" >{{i.t}}</option>
          </select>
        </div>
        <label class="col-sm-2 col-form-label"  >类型：</label>
        <div class="col-sm-4">
          <select class="form-control" v-model="type_id" >
            <option v-for="i in typeList" :value="i.v" >{{i.t}}</option>
          </select>
        </div>
      </div>
      <div class="form-group row" v-show="type_id === 'event'" >
        <label class="col-sm-2 col-form-label"  >事件类型：</label>
        <div class="col-sm-4">          
          <select class="form-control" v-model="d.event" >
            <option v-for="i in DTypeList" :value="i.v" >{{i.t}}</option>
          </select>
        </div>
        <label class="col-sm-2 col-form-label"  >事件id：</label>
        <div class="col-sm-4">
          <input class="form-control" type="text" v-model="d.e_id" >
        </div>        
      </div>
      <div class="form-group row">
        <div class="col-sm-10">
          <button type="button" class="btn btn-primary col-sm-2" @click="getListData()" >搜索</button>
        </div>
      </div>
    </form>
    <div class="col-sm-10">
      <p>PV: {{total.PV}} <br> UV: {{total.UV}}</p>
      <canvas width="960" height="500" id="myChart" ></canvas>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="addSiteIdModal" tabindex="-1" role="dialog" aria-labelledby="addSiteIdModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">新增域名</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" >站点名称：</label>
              <div class="col-sm-8">
                <input class="form-control" type="text" v-model="siteIdForm.name" >
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" >站点链接：</label>
              <div class="col-sm-8">
                <input class="form-control" type="text" v-model="siteIdForm.url">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="clearSiteIdForm">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveSiteIdForm" >保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const axios = require('axios');
var siteList = localStorage.getItem('siteListStore') 
    siteList = siteList && JSON.parse(siteList) && JSON.parse(siteList).list ? JSON.parse(siteList).list : [{
  t: 'test01',
  v: 'http://starofus.com/performans.html'
}];

const typeList = [{
  t: '访问',
  v: 'load'
},{
  t: '报错',
  v: 'error'
},{
  t: '事件',
  v: 'event'
}];

const DTypeList = [{
  t: '点击',
  v: 'click'
}];

export default {
    name: 'index',
    mixins: [],
    directives: {
    },
    data() {
        return {
          start: this.now(-15*60),
          end: this.now(),
          siteList,
          site_id: siteList[0].v,
          interval: 30, //   这个要根据间隔计算一下
          list: [],
          options: {},
          chartColors: {
              "blue": "rgb(54, 162, 235)",
              "green": "rgb(75, 192, 192)",
              "grey": "rgb(201, 203, 207)",
              "orange": "rgb(255, 159, 64)",
              "purple": "rgb(153, 102, 255)",
              "red": "rgb(255, 99, 132)",
              "yellow": "rgb(255, 205, 86)"
          },
          typeList,
          type_id: typeList[0].v,
          siteIdForm: {
            name: undefined,
            url: undefined
          },
          d: {
            event: DTypeList[0].v,
            e_id: undefined
          },
          DTypeList,
          total: {
            PV: 0,
            UV: 0
          }
        }
    },
    computed: {

    },

    methods: {
      now (d) {
        d = d || 0;
        var _n = new Date();
            _n = new Date(_n.getTime() + d * 1000);
        var _month = _n.getMonth() + 1;
        return _n.getFullYear() + '-' + ( _month <=9 ? '0' + _month : _month ) + '-' + _n.getDate() + ' ' + _n.getHours() + ':' + _n.getMinutes()
      },
      getListData () {
        var _start = document.querySelector('#start').value.replace(/[\-\ \:]/g, '') + '00',
            _end = document.querySelector('#end').value.replace(/[\-\ \:]/g, '') + '00';
        var _url = 'http://t.imaisu.com/api/event_data?start=' + _start + '&end=' + _end + '&interval=' + this.interval + '&id=' + this.site_id + '&type=' + this.type_id;

        if (this.type_id === "event") {
          _url += '&d[event]=' + this.d.event + '&d[e_id]=' + this.d.e_id;
        }

        axios.get(_url)
          .then( response => {
            // handle success
            var _data = response.data.list;
            this.list = this.generateDataList(_data);
            this.options = this.generateOpts(_data);
            console.log(this.list, this.options)
            this.total.PV = response.data.pv;
            this.total.UV = response.data.uv;
            this.initChart();
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          });
      }
      , initChart () {
        console.log(this.list, this.options)
        var ctx = document.getElementById('myChart').getContext('2d');
        var myLineChart = new Chart(ctx, {
            type: 'line',
            data: this.list,
            options: this.options
        });
      }
      , generateOpts (data) {
        return {
    				responsive: true,
    				title: {
    					display: true,
    					text: '访客趋势'
    				},
    				tooltips: {
    					mode: 'index',
    					intersect: false,
    				},
    				hover: {
    					mode: 'nearest',
    					intersect: true
    				},
    				scales: {
    					xAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: '时间'
    						}
    					}],
    					yAxes: [{
    						display: true,
    						scaleLabel: {
    							display: true,
    							labelString: '访问人数'
    						}
    					}]
    				}
    			}
      }
      , generateDataList (data) {
        var labels = [], pvData = [], uvData = [];
        data.forEach((e, i) => {
          labels.push(e.time);
          pvData.push(e.pv);
          uvData.push(e.uv);
            })
        return {
            labels,
            datasets: [{
              label: 'PV',
    					backgroundColor: this.chartColors.red,
    					borderColor: this.chartColors.red,
              fill: false,
              data: pvData
            }
            ,{
              label: 'UV',
    					backgroundColor: this.chartColors.blue,
    					borderColor: this.chartColors.blue,
              fill: false,
              data: uvData
            }]
          }
      }
      , initDatePicker () {
        $(".datetimepicker").datetimepicker({
            autoclose: !0,
            componentIcon: ".mdi.mdi-calendar",
            navIcons: {
                rightIcon: "mdi mdi-chevron-right",
                leftIcon: "mdi mdi-chevron-left"
            }
        })
      },
      clearSiteIdForm (){
        this.siteIdForm.name = '';
        this.siteIdForm.url = '';
      },
      saveSiteIdForm () {
        alert(`添加成功${this.siteIdForm.name}: ${this.siteIdForm.url}`)
        this.siteList.push({
          t: this.siteIdForm.name,
          v: this.siteIdForm.url
          })
        localStorage.setItem('siteListStore', JSON.stringify({ list: this.siteList }));
      }
    },

    mounted() {
      this.getListData();
      this.initDatePicker();
    },
    components: {
    }
};
</script>

<style lang="less">
.page {
  padding: 10px;
  .add_site_id {
    font-size: 16px; 
    text-decoration: none;
    margin-left: 20px;
  }
}
</style>
